<template>
  <div class="table_box_content">
    <div class="content-box">
      <el-table
        ref="Table"
        class="table-box"
        :data="loginfo.students"
        border
        height="100%"
        style="width: 100%">
        <el-table-column
          prop="name"
          width="128px"
          align="center"
          label=""
          fixed
        >
        </el-table-column>
        <template v-for='(col,i) in loginfo.dateList'>
          <el-table-column
            :show-overflow-tooltip="true"
            :label="col"
            :key="col"
            min-width="525px"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="!scope.row.list[i].contentList || !scope.row.list[i].contentList.length" class="box-text">暂无内容</div>
              <div class="flex box-text"
                   v-for="(c_item,c_index) in scope.row.list[i].contentList" :key="c_index">
                <div class="content-bit">{{ c_index + 1 }}</div>
                <div class="content-text-1" v-html="c_item.htmlText"></div>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    compared_list: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      loginfo: {
        'students': [],
        'dateList': []
      },
    }
  },
  watch: {
    compared_list(val) {
      this.loginfo.dateList = []
      this.loginfo.students = []
      val[0].forEach(res=> {
        this.loginfo.students.push({
          'name':res.dutyYear?res.dutyYear:'',
          'list': []
        })
      })
      val.forEach((res,index)=> {
        this.loginfo.dateList.push(res[0].deptName)
        res.length && res.forEach((result,r_index) => {
          this.loginfo.students[r_index].list.push({'contentList': result.contentList?result.contentList:[]})
        })
      })
      this.$nextTick(()=> {
        this.$refs.Table.doLayout()
      })
    }
  },
   mounted() {
    this.compared_list[0].forEach(res=> {
      this.loginfo.students.push({
        'name':res.dutyYear,
        'list': []
      })
    })
     this.compared_list.forEach((res,index)=> {
       this.loginfo.dateList.push(res[0].deptName)
       res.forEach((result,r_index) => {
         this.loginfo.students[r_index].list.push({'contentList': result.contentList})
       })
     })
     this.$nextTick(()=> {
       this.$refs.Table.doLayout()
     })
  },
  methods: {

  }
}
</script>

<style scoped>
::v-deep tr td:first-child {
  background-color: #F5F5F5;
}
::v-deep tr th {
  background-color: #F5F5F5;
}
::v-deep .el-table__fixed {
  height: 100% !important;
}
.box-text {
  padding: 8px;
}
/*table*/
.table_box_content {
  width: 100%;
  height: 100%;
}
.flex {
  display: flex;
}
.content-bit {
  width: 17px;
  height: 17px;
  margin-top: 0.2rem;
  border-radius: 0.1rem;
  background-color: rgba(59, 117, 255, 1);
  color: #FFFFFF;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-text-1 {
  flex: 1 !important;
  margin-left: 7px;
  font-size: 16px;
  text-align: start !important;
  white-space: pre-wrap;
}
.content-box {
  overflow:auto;
  height: 100%;
  border: 1px solid rgba(0,0,0,0.1)
}
.table-box {
  width: 100%;
  height: 100%;
  font-size: 16px;
}
@media (max-width: 1024px) {
  .table-box {
    font-size: 14px;
  }
  .content-bit {
    width: 17px;
    height: 17px;
    margin-top: 0.2rem;
    border-radius: 0.1rem;
    background-color: rgba(59, 117, 255, 1);
    color: #FFFFFF;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content-text-1 {
    flex: 1 !important;
    margin-left: 7px;
    font-size: 14px;
    text-align: start !important;
    white-space: pre-wrap;
  }
}
</style>
